<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>账单</title>
    <link th:href="@{/layer/css/layui.css}" rel="stylesheet">
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet">

    <link rel="stylesheet" th:href="@{/css/style.css}">
    <script type="text/javascript" th:src="@{/js/jquery.min.js}" ></script>
    <script th:src="@{/layer/layui.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12"><!--th:action="@{}" th:method="post"-->
            <form id="userFrm" class="layui-form" >
                <div class="form-group row">
                    <select class="form-control" id="outTableid" required="true" th:name="outTableid" >
                        <option th:value="0">请选择餐桌</option>
                        <option th:each="open:${Open}" th:value="${open.getOutTableid()}" th:text="${open.getDiningnumber()}"></option>
                    </select>
                </div>
                <div class="row">
                    <label  class="col-sm-2 col-form-label">图片</label>
                    <label  class="col-sm-2 col-form-label">名称</label>
                    <label  class="col-sm-2 col-form-label">价格</label>
                    <label  class="col-sm-2 col-form-label">单位</label>
                    <label  class="col-sm-2 col-form-label">数量</label>
                </div>
                <div class="form-group row" th:each="menu:${Menu}">
                    <div class="col-sm-2">
                        <img width='50px' height='50px' alt='' th:src='${menu.getImgpath()}'>
                    </div>
                    <div class="col-sm-2">
                        <p th:text="${menu.getMenuname()}"></p>
                        <input class="form-control hidden" th:value="${menu.getMenuid()}"  name="mids">

                    </div>
                    <div class="col-sm-2">
                        <p th:text="${menu.getMenuprice()}"></p>
                    </div>
                    <div class="col-sm-2">
                        <p th:text="${menu.getMenuP()}"></p>
                    </div>
                    <div class="col-sm-2">
                        <input type="text"  class="form-control hidden" id="id0" name="id" th:value="${session.UsernameID}">
                        <input class="form-control" id="conuts" name="conuts" value="1" oninput = "value=value.replace(/[^\d]/g,'')">
                    </div>
                </div>
                <div class="form-group row">
                    <button  class="btn btn-primary col-sm-12" lay-submit="" lay-filter="updateUser">下单</button>
                    <button type="button" class="btn btn-secondary col-sm-12" data-dismiss="modal">Close</button>
                </div>
            </form>

        </div>
    </div>
</div>
<script type="text/javascript">
    var form;
    var layer;
    layui.use(['form', 'layer', 'jquery', 'laydate'], function () {
        form = layui.form;
        var laydate = layui.laydate;
        var $ = layui.jquery;
        //如果父页面有layer就是用父页面的，没有就导入
        layer = parent.layer === undefined ? layui.layer : parent.layer;

        //绑定时间选择器
        laydate.render({
            elem: '#hiredate'
        });

        //监听提交，使用layui form submit事件
        form.on('submit(updateUser)', function () {
            var selectid = $("#outTableid").val();
            //form获取数据
            var data = $('#userFrm').serialize();
            console.log(selectid);
            if (selectid > 0){
                $.post(
                    '/menutable/AddMenu',
                    data,
                    function (data) {
                        console.log(data);
                        if (data.code == 0) {
                            //弹出成功的提示
                            layer.msg(data.msg, {icon: 1, time: 2000});
                            //重载表格
                            parent.tableOne.reload();
                            //关闭窗口
                            var index = layer.getFrameIndex(window.name);
                            layer.close(index);
                        } else {
                            layer.msg(data.msg, {icon: 2, time: 3000});
                        }
                    }
                );
            }
            else{
                layer.msg("请选择餐桌", {icon: 2, time: 2000});
                return false;
            }

            return false;
        });

        /**
         * 监听用户姓名失去焦点事件，请求后台自动生成对应的全拼拼音
         */

    });
    /**
     * 页面加载的时候也初始化部门树
     */
    $(function () {
    });

</script>
</body>
</html>